<template>
  <div class="filterBox">
    <h2>筛选</h2>
    <h3>单选</h3>
    <ul>
      <li v-for="(item, index) in radio" :key="index*100">
        <input type="radio" :id="item.value" name="color"  :value="item.value"  v-model="form.checkedRadio" />
        <label :for="item.value"> {{ item.value }} </label>
      </li>
    </ul>
    <h3 class="bot">特色</h3>
    <ul>
      <li v-for="(item,i) in feature" :key="i">
        <input type="checkbox" :id="item.name" name="color" :value="item.code"  v-model="form.checkedBox" />
        <label :for="item.name"> {{ item.name }} </label>
      </li>
    </ul>
    <h3 class="bot">户型(室)</h3>
    <van-field
      readonly
      clickable
      label="户型"
      :value="value"
      placeholder="选择户型"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="unitType"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        ref="type"
      />
    </van-popup>
    <footer>
      <span class="left" @click="clearForm">清空</span>
      <button class="right" @click="searchSubmit">确定</button>
    </footer>
  </div>
</template>

<script>
import { getFeature } from '../api/index'
export default {
  data() {
    return {
      form: {
        checkedRadio: this.$store.state.checkedRadio,
        checkedBox: this.$store.state.checkedBox,
        rentType:''
      },
      radio: [
        {value: '整租'},{value: '合租'},{value: '品牌公寓'},{value: '业主直租'}],
      feature: [],
      value: '',
      showPicker: false,
      unitType: [],
      unitTypeCode: []
    };
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    searchSubmit() {
      // 户型
      if(this.value) {
        this.unitTypeCode.forEach( (item) => {
          if(item.name == this.value) {
            this.form.rentType = item.code;
            return
          }
        } )
        
      }
      
      let obj = {
        searchList: this.form,
        popView: true
      }
      this.$store.commit('setCheckedBox', this.form.checkedBox)
      this.$store.commit('setCheckedRadio', this.form.checkedRadio)
      this.$emit('searchContent',obj)
    },
    clearForm() {
      this.form = {
        checkedRadio: '',
        checkedBox: [],
        rentType:''
      };
      this.value = ''
    },
    async initFeature() {
      let { data: { filterData1, filterData2} } = await getFeature();
      this.feature = filterData1;
      // console.log(this.feature);
      this.unitTypeCode = filterData2
      this.unitType = filterData2.map( (item) => {
        return item.name;
      } )
    },
  },
  created() {
    this.initFeature()
  }
};
</script>

<style scoped lang='less'>
* {
  margin: 0;
  padding: 0;
}
.filterBox {
  position: absolute;
  top: 10px;
  left: 25px;
  width: 700px;
  background-color: #fff;
  z-index: 9999;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 20px #ccc;
  h2 {
    font-size: 36px;
    padding: 85px 0;
    text-align: center;
    font-weight: 400;
  }
  h3 {
    margin: 0 20px;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 25px;
  }
  .bot {
    margin-top: 34px;
  }
  ul {
    // display: flex;
    margin: 0 20px;
    overflow: hidden;
    li {
      float: left;
      font-size: 24px;
      flex-wrap: wrap;
      margin-right: 40px;
      margin-bottom: 40px;
      &:nth-child(4n) {
        margin-right: 0;
      }
      label {
        display: inline-block;
        width: 135px;
        border-radius: 8px;
        text-align: center;
        line-height: 65px;
        background-color: #f2f2f2;
      }
    }
  }
  footer {
    margin: 30px;
    .left {
      font-size: 24px;
    }
    .right {
      float: right;
      width: 145px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      font-size: 32px;
      color: #fff;
      background-color: #ff5654;
      border: 1px solid #ff4142;
      border-radius: 8px;
    }
  }
}
input[type="radio"],
input[type="checkbox"] {
  display: none;
}
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
  background-color: #ff5654;
  color: #fff;
}
</style>